<template>
     <div class="loginIma"  >

        <div style="height: 1100px;">


            <el-image :src="src" style="width: 200px;height: 200px;border-radius: 100%;margin-left: 870px;margin-top: 120px;"></el-image>
            <el-card style="width:500px;text-align: center;margin: 0 auto;margin-top: 50px;background-color:transparent;color: white">

                <div slot="header">
                    <h2 style="color: dodgerblue">辰慕的博客</h2>
                    <div>
                    </div>
                    <el-form :model="user" :rules="rules" ref="loginForm" label-width="80px"  class="demo-ruleForm"  style="color: white">

                        <el-form-item   label="账号" style="" prop="acct" >
                          <el-input v-model="user.acct" type="text" suffix-icon="el-icon-user"></el-input>
                        </el-form-item>
                        <el-form-item label="密码"  prop="paw">
                            <el-input v-model="user.paw" type="password" suffix-icon="el-icon-view"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="login('loginForm')" type="primary"  >登录</el-button>
<!--                            <el-button @click="$router.push('/fuondpassword')" type="text">忘记密码？</el-button>-->
                            <span style="margin-left: 30px;color: #66b1ff">敬请期待</span>
                            <el-divider direction="vertical"></el-divider>
                            <el-button @click="$router.push('/rigest')" type="text">没有账号？去注册</el-button>
                        </el-form-item>

                    </el-form>
                </div>
            </el-card>

        </div>

    </div>

</template>

<script>


    export default {
        name: "login",
        data() {
            return {
                user: {
                    acct: '',
                    paw: '',
                },
                src:'https://img1.baidu.com/it/u=3500986754,3985012254&fm=26&fmt=auto&gp=0.jpg',

                rules: {
                    acct: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        // {min: 2, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur'}
                    ],
                    paw: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        // {min: 2, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur'}
                    ],
                },

            }
        },
        created() {
            this.$axios.get("/api/user/main/info",{headers:{TOKEN:this.token}}).then(res=>{
                this.userInfo = res.data.data;
            })
        },
        methods: {

            login(loginForm) {
                this.$refs[loginForm].validate((r) => {
                    if (r) {
                        this.$axios.post('/api/user/login', this.user).then((res) => {
                            if (res.data.status === 1) {
                                this.$message.success(res.data.msg);
                                localStorage.setItem('TOKEN', res.data.data.token);
                                localStorage.setItem('NAME', res.data.data.name);
                                this.$router.push('index')
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        })
                    } else {
                   this.$message.error("请填入完整信息")
                    }
                })
            }


    }

    }
</script>
<style>

    .loginIma{
        background-image: url("https://img1.baidu.com/it/u=3033587885,1767195261&fm=26&fmt=auto&gp=0.jpg");
        position:fixed;
        top: 0;
        left: 0;
        width:100%;
        height:100%;
        min-width: 1000px;
        z-index:-10;
        zoom: 1;
        background-color: #fff;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-position: center 0;
    }
</style>